<!-- 住院人均费用/手术收入占比 -->
<template>
    <div id="operationIncome">
        <el-table :data="formData" style="width: 100%" ref="table" class="prev-list">
            <el-table-column prop="name" align="center" label="就诊医院" width="110" show-overflow-tooltip></el-table-column>
            <el-table-column prop="top" align="center" label="住院人均费用" show-overflow-tooltip></el-table-column>
            <el-table-column prop="bottom" align="center" label="手术收入占比" show-overflow-tooltip></el-table-column>
        </el-table>
    </div>
</template>
<script>
// import { getOperationIncomeData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
            formData: [
                {
                    name: "人民医院",
                    top: "",
                    bottom: "",
                },
                {
                    name: "二院",
                    top: "",
                    bottom: "",
                },
                {
                    name: "中医院",
                    top: "",
                    bottom: "",
                },
                {
                    name: "乡镇卫生院",
                    top: "",
                    bottom: "",
                },
            ],
        };
    },

    mounted() {
        // this.setEcharts();
        this.sortData();
    },

    methods: {

        sortData() {
            let data = [{ VALUE1: Mock.Random.integer(15000, 20000), VALUE2: Mock.Random.float(0.1, 0.5, 1, 2) },
            { VALUE1: Mock.Random.integer(13000, 20000), VALUE2: Mock.Random.float(0.1, 0.5, 1, 2) },
            { VALUE1: Mock.Random.integer(11000, 20000), VALUE2: Mock.Random.float(0.1, 0.5, 1, 2) },
            { VALUE1: Mock.Random.integer(5000, 10000), VALUE2: Mock.Random.float(0.1, 0.5, 1, 2) }]
            data.forEach((item, index) => {
                this.formData[index].top = item.VALUE1;
                this.formData[index].bottom = item.VALUE2;
            });
        },
    },
};
</script>
<style lang="scss">
#operationIncome {
    width: 100%;
    height: 100%;

    .el-table {
        &::before {
            background: transparent;
        }

        background: transparent;

        .el-table__row td:first-child .cell {
            background: rgb(96, 64, 192, 0.1);
            border-radius: 12px;
            // font-weight: 600;
        }

        .el-table__expanded-cell {
            background: transparent;
        }

        .el-table__header {
            margin-top: 8px;

            th>.cell {
                font-size: 18px;
                font-weight: 600;
                color: #fff;
            }
        }

        .el-table__body-wrapper {
            height: 264px;

            .cell {
                font-size: 18px;
                font-weight: 400;
                color: #ffffff;
                height: 44px;
                line-height: 44px;
                background: rgba(79, 166, 229, 0);

                &.el-tooltip {
                    width: auto !important;
                }
            }
        }

        td {
            padding: 4px 0;
        }

        th,
        tr {
            background: transparent;
        }

        tr,
        tr:hover {
            background: transparent;

            td .cell {
                color: #fff;
                background-image: linear-gradient(rgba(255, 220, 26, 0.36),
                        rgba(255, 220, 26, 0.2),
                        rgba(255, 220, 26, 0.36));
            }

            td.el-table__cell {
                background-color: transparent;
            }
        }

        td,
        .is-leaf {
            border: none;
        }
    }
}
</style>